<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>我的预约 - Nkuvr 后台管理系统</title>
    <meta name="author" content="yinqi">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:replace="fragment/_fragment::navbar"></aside>


        <!--头部信息-->
        <header th:replace="fragment/_fragment::sidebar"></header>


        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field"
                                                   value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn"
                                                    data-toggle="dropdown" type="button" aria-haspopup="true"
                                                    aria-expanded="false">
                                                学号 <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a tabindex="-1" href="javascript:void(0)"
                                                       data-field="title">学号</a>
                                                </li>
                                                <li><a tabindex="-1" href="javascript:void(0)"
                                                       data-field="cat_name">用户名</a></li>
                                            </ul>
                                        </div>
                                        <input type="text" class="form-control" value="" name="keyword"
                                               placeholder="请输入名称">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="/appointment/add"><i
                                            class="mdi mdi-plus"></i>
                                        新增</a>
                                    <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>教室号</th>
                                            <th>预约人数</th>
                                            <th>状态</th>
                                            <th>预约时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="appointment : ${pageInfo.list}">
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" name="ids[]" value="1"><span></span>
                                                </label>
                                            </td>
                                            <td th:text="${appointment.getUser().studentNumber}"></td>
                                            <td th:text="${appointment.getUser().realName}"></td>
                                            <td th:text="${appointment.getLab().name}"></td>
                                            <td th:text="${appointment.appointmentNumber}"></td>
                                            <td th:switch="${appointment.state}">
                                                <font th:case="0" class="text-success">通过</font>
                                                <font th:case="1" class="text-danger" th:title="${appointment.reason}">不通过，查看原因</font>
                                                <font th:case="2" class="text-warning">审核中</font>
                                                <font th:case="3" class="text-danger">已取消</font>
                                            </td>
                                            <td th:text="${#dates.format(appointment.activityTime, 'yyyy-MM-dd')}"></td>
                                            <td>
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-default"
                                                       th:href="@{'/appointment/edit/' + ${appointment.id}}"
                                                       data-toggle="tooltip"><i class="mdi mdi-pencil"></i>修改</a>
                                                    <a class="btn btn-xs btn-default"
                                                       th:href="'javascript:doCancel('+ ${appointment.id} +')'"
                                                       data-toggle="tooltip"><i
                                                            class="mdi mdi-window-close"></i>取消</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination">

                                    <p>当前第 [[${pageInfo.pageNum}]] 页 | 共 [[${pageInfo.pages}]] 页 | 一共
                                        [[${pageInfo.total}]] 条记录</p>

                                    <li th:class="${pageInfo.pageNum == 1 ? 'disabled' : ''}"><a
                                            th:href="@{'/appointment/list?page=' + ${pageInfo.pageNum - 1}}"><span>«</span></a>
                                    </li>

                                    <li th:each="i: ${pageInfo.navigatepageNums}"
                                        th:class="${pageInfo.pageNum == i} ? 'active' : ''"><a
                                            th:href="@{'/appointment/list?page=' + ${i}}"><span>[[ ${i} ]]</span></a>
                                    </li>

                                    <li th:class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}"><a
                                            th:href="@{'/appointment/list?page=' + ${pageInfo.pageNum + 1}}"><span>»</span></a>
                                    </li>


                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>

    </div>
</div>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../js/main.min.js"></script>
<script src="../../layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });
</script>
<script th:inline="javascript">
    function doCancel(id) {
        var uid = [[${session.loginUser.id}]];
        var loadingIndex = null;
        layer.confirm("确认取消该预约吗？", {btn: ['确认', '取消']}, function () {
            $.ajax({
                type: "post",
                url: "/appointment/cancel/" + id,
                data: {
                    "id": id
                },
                beforeSend: function () {
                    loadingIndex = layer.msg("处理中", {icon: 16});
                },
                success: function (result) {
                    layer.close(loadingIndex);
                    if (result.success) {
                        layer.msg("取消成功", {time: 1000, icon: 6});
                        window.location.href = "/appointment/my/" + uid;
                    } else {
                        layer.msg("取消失败，请重新操作", {time: 1000, icon: 5, shift: 6});
                    }
                }
            });
        });
        return false;
    }
</script>

<script th:inline="javascript">

</script>
</body>
</html>